<template>
  <view :data-theme="globPrimary">
    <view class="yq-status-bar" :style="{ height: globStatusBarHeight + 'px' }"></view>
    <view class="yq-intention-header u-border-bottom" :style="{ height: globNavbarHeight + 'px' }">
      <view @tap="close" class="close">
        <u-icon name="close" color="#909399" size="30"></u-icon>
      </view>
      <view class="text">选择意向课程</view>
    </view>
    <view class="yq-intention-wrap" :style="{ height: intentionHeight + 'px' }">
      <scroll-view scroll-y scroll-with-animation class="yq-intention-menu" :scroll-top="scrollTop">
        <view
          v-for="(item, index) in categoryList"
          :key="item.id"
          class="yq-intention-menu__item"
          :class="[currentMenu == item.id ? 'active' : '']"
          @tap.stop="swichMenu(item, index)"
        >
          <text class="u-line-1">{{ item.title }}</text>
        </view>
      </scroll-view>
      <view class="yq-intention-body">
        <scroll-view scroll-y>
          <view v-if="!loading" class="yq-intention-body__page">
            <view
              class="page-title"
              :class="[categoryId == categoryData.id ? 'active' : '']"
              @click="chooseCategoryId(categoryData.id)"
            >
              <text>全部</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
            <view class="page-item" v-for="ov in categoryData.child" :key="ov.id">
              <view
                class="title"
                :class="[categoryId == ov.id ? 'active' : '']"
                @click="chooseCategoryId(ov.id)"
              >
                <text class="u-line-1">{{ ov.title }}</text>
                <u-icon name="arrow-right"></u-icon>
              </view>
              <view class="parallel">
                <view class="item" v-for="item in ov.child" :key="item.id">
                  <view
                    class="name u-line-1"
                    :class="[categoryId == item.id ? 'active' : '']"
                    @click="chooseCategoryId(item.id)"
                    >{{ item.title }}</view
                  >
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      categoryList: [],
      categoryData: {},
      categoryId: 0,
      scrollTop: 0,
      currentMenu: 0,
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      loading: true,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    intentionHeight() {
      let height = this.$u.sys().screenHeight
      return height - this.globStatusBarHeight - this.globNavbarHeight
    },
  },
  mounted() {
    this.getCategoryList()
  },
  methods: {
    // 获取分类数据
    getCategoryList() {
      this.loading = true
      this.$edu.api.getCategory().then((res) => {
        const { data } = res
        this.categoryList = data
        const item = data.find((_, index) => index == 0)
        if (item) {
          this.currentMenu = item.id
          this.categoryData = item
        }
        setTimeout(() => {
          this.loading = false
        }, 100)
      })
    },
    async swichMenu(item, index) {
      if (item.id == this.currentMenu) return
      this.currentMenu = item.id
      this.categoryData = item
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('yq-intention-menu', 'menuHeight')
        await this.getElRect('yq-intention-menu__item', 'menuItemHeight')
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
    },
    // 分类选择
    chooseCategoryId(id) {
      this.$edu.judgeLogin(() => {
        if (id == this.categoryId) return
        this.categoryId = id
        this.$emit('submit', id)
      })
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select('.' + elClass)
          .fields({ size: true }, (res) => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
              setTimeout(() => {
                this.getElRect(elClass)
              }, 10)
              return
            }
            this[dataVal] = res.height
          })
          .exec()
      })
    },
    close() {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.yq-status-bar {
  width: 100%;
}
.yq-intention-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: $edu-main-color;
  }
  .close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30rpx;
  }
}
.yq-intention-wrap {
  display: flex;
  overflow: hidden;
  background-color: #fff;
  .yq-intention-menu {
    width: 210rpx;
    height: 100%;
    background: #f7f7f7;
    .yq-intention-menu__item {
      height: 120rpx;
      padding: 0 10rpx;
      background: #f7f7f7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: $edu-content-color;
      font-weight: 400;
      &.active {
        position: relative;
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
        background-color: #ffffff;
        &::before {
          content: '';
          position: absolute;
          border-left-width: 6rpx;
          border-left-style: solid;
          @include border-color();
          height: 120rpx;
          left: 0;
          top: 0;
        }
      }
    }
  }
  .yq-intention-body {
    flex: 1;
    min-width: 0;
    &__page {
      padding: 30rpx;
      background-color: #fff;
      .page-title {
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
        margin-bottom: 50rpx;
        &.active {
          @include text-color();
        }
      }
      .page-item {
        border-radius: 8rpx;
        .title {
          display: flex;
          font-size: 30rpx;
          font-weight: 500;
          color: $edu-main-color;
          margin-bottom: 30rpx;
          &.active {
            @include text-color();
          }
        }
        .parallel {
          display: flex;
          flex-wrap: wrap;
          margin-left: -14rpx;
          margin-right: -14rpx;
          .item {
            padding: 0 14rpx;
            margin-bottom: 40rpx;
            .name {
              max-width: 480rpx;
              padding: 0 20rpx;
              height: 64rpx;
              line-height: 64rpx;
              text-align: center;
              background: #f7f7f7;
              border-radius: 32px;
              font-size: 28rpx;
              font-weight: 400;
              color: $u-main-color;
              &.active {
                @include text-color();
              }
            }
          }
        }
      }
    }
  }
}
</style>
